<template>
  <div class="main-container">
    <header>
      <NavBar/>
      <h1>前途无忧 - 人才招聘平台</h1>
    </header>
    <div class="search-bar">
      <input v-model="query" @input="handleInput" placeholder="搜索职位..." />
      <select v-model="fl" @change="handleSearch">
        <option value="">选择大类</option>
        <option value="医疗">医疗</option>
        <option value="互联网">互联网</option>
        <option value="传媒">传媒</option>
        <option value="游戏">游戏</option>
      </select>
      <button @click="handleSearch">搜索</button>
    </div>
    <div class="search-results" v-if="searchResults.length > 0">
      <h2>搜索结果</h2>
      <ul>
        <li v-for="job in searchResults" :key="job.jobNumber">
          <p>{{ job.job_name }} - ￥{{ job.salary }}</p>
          <p>公司: {{ job.company }}</p>
        </li>
      </ul>
    </div>
    <div v-else-if="searchPerformed && searchResults.length === 0">
      <p>没有找到符合条件的职位。</p>
    </div>
    <QuickSearch/>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import SearchBar from "@/components/SearchBar.vue";
import QuickSearch from "@/components/QuickSearch.vue";
import axios from 'axios';

export default {
  data() {
    return {
      searchResults: '',
      query: '',
      fl: '',
      searchPerformed: false
    };
  },
  components: {QuickSearch, SearchBar, NavBar},
  methods: {
    handleInput(query) {
      console.log('实时输入:', query);
    },
    handleSearch() {
      console.log('搜索:', this.query, '大类:', this.fl);
      axios.get('http://localhost:8099/jobs/search', {
        params: {
          job_name: this.query,
          fl: this.fl
        }
      }).then(response => {
        this.searchResults = response.data;
        this.searchPerformed = true;

        this.$router.push({
          name: 'searchResults',
          query: {
            job_name: this.query,
            fl: this.fl
          }
        });
      }).catch(error => {
        console.error('搜索错误:', error);
        this.searchPerformed = true;
      });
    },
    viewJobDetails(jobName) {
      this.$router.push({ name: 'job-details', params: { jobName } });
    },
    navigateToPersonalInfo() {
      this.$router.push('/personal-info');
    }
  }
}
</script>

<style>
.main-container {
  text-align: center;
  padding: 20px;
}

.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.search-bar input {
  width: 300px;
  padding: 10px;
  margin-right: 10px;
}

.search-bar select {
  padding: 10px;
  margin-right: 10px;
}

.search-bar button {
  padding: 10px 20px;
}

.search-results {
  margin-top: 20px;
}

.search-results ul {
  list-style-type: none;
  padding: 0;
}

.search-results li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.clickable-text {
  color: blue;
  cursor: pointer;
}

.footer {
  margin-top: 20px;
}
</style>